<%@ page import="java.net.URLEncoder" %>
<%
String hexColor = request.getParameter("c");
if (hexColor == null || hexColor.isEmpty()) {
	hexColor = "#00FFFF";
}
String encodedHexColor = URLEncoder.encode(hexColor, "UTF-8");

String backgroundColor = request.getParameter("b");
if (backgroundColor == null || backgroundColor.isEmpty()) {
	backgroundColor = "#FFAAFF";
}

// http://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg
// http://localhost:8080/colouriseimage/colourise?c=%2300FFFF&url=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F2%2F23%2FLake_mapourika_NZ.jpeg
// http://localhost:8080/colouriseimage/colourise?c=%2300CC66&url=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2F2%2F23%2FLake_mapourika_NZ.jpeg

%>
<html>
	<head>
		<title>Test</title>
		<style>
			.white img, .magenta img {
				margin: 0.5em;
			}
			.white {
				background-color: #FFFFFF;
			}
			.customColor {
				background-color: <%=backgroundColor %>;
			}
			.pattern {
				background-image: url('http://static4.depositphotos.com/1001655/277/v/950/depositphotos_2770346-Cmyk-dot-pattern-color-print-raster.jpg');
			}
		</style>
	</head>
	<body>
		<div class="white">
			<img src="http://j.e-atlas.org.au/_TO_DELETE_/solid.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Fsolid.png"/>
			<br/>

			<img src="http://j.e-atlas.org.au/_TO_DELETE_/fade.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Ffade.png"/>
			<br/>

			<img src="http://benweldondesign.com/gdes-315/exercises/ex_01/imageoptimize/test/icon_png-24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fbenweldondesign.com%2Fgdes-315%2Fexercises%2Fex_01%2Fimageoptimize%2Ftest%2Ficon_png-24.png"/>
			<br/>

			<img src="http://images.sixrevisions.com/2010/11/17-20_search_png24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fimages.sixrevisions.com%2F2010%2F11%2F17-20_search_png24.png"/>
			<br/>

			<img src="http://garmahis.com/wordpress/wp-content/uploads/2009/09/PNG24-transparency.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fgarmahis.com%2Fwordpress%2Fwp-content%2Fuploads%2F2009%2F09%2FPNG24-transparency.png"/>
		</div>
		<div class="customColor">
			<img src="http://j.e-atlas.org.au/_TO_DELETE_/solid.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Fsolid.png"/>
			<br/>

			<img src="http://j.e-atlas.org.au/_TO_DELETE_/fade.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Ffade.png"/>
			<br/>

			<img src="http://benweldondesign.com/gdes-315/exercises/ex_01/imageoptimize/test/icon_png-24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fbenweldondesign.com%2Fgdes-315%2Fexercises%2Fex_01%2Fimageoptimize%2Ftest%2Ficon_png-24.png"/>
			<br/>

			<img src="http://images.sixrevisions.com/2010/11/17-20_search_png24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fimages.sixrevisions.com%2F2010%2F11%2F17-20_search_png24.png"/>
			<br/>

			<img src="http://garmahis.com/wordpress/wp-content/uploads/2009/09/PNG24-transparency.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fgarmahis.com%2Fwordpress%2Fwp-content%2Fuploads%2F2009%2F09%2FPNG24-transparency.png"/>
		</div>
		<div class="pattern">
			<img src="http://j.e-atlas.org.au/_TO_DELETE_/solid.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Fsolid.png"/>
			<br/>

			<img src="http://j.e-atlas.org.au/_TO_DELETE_/fade.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fj.e-atlas.org.au%2F_TO_DELETE_%2Ffade.png"/>
			<br/>

			<img src="http://benweldondesign.com/gdes-315/exercises/ex_01/imageoptimize/test/icon_png-24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fbenweldondesign.com%2Fgdes-315%2Fexercises%2Fex_01%2Fimageoptimize%2Ftest%2Ficon_png-24.png"/>
			<br/>

			<img src="http://images.sixrevisions.com/2010/11/17-20_search_png24.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fimages.sixrevisions.com%2F2010%2F11%2F17-20_search_png24.png"/>
			<br/>

			<img src="http://garmahis.com/wordpress/wp-content/uploads/2009/09/PNG24-transparency.png"/>
			<img src="/colouriseimage/colourise?c=<%=encodedHexColor %>&url=http%3A%2F%2Fgarmahis.com%2Fwordpress%2Fwp-content%2Fuploads%2F2009%2F09%2FPNG24-transparency.png"/>
		</div>
	</body>
</html>
